<template>
  <el-card class="list-view-card" shadow="never">
    <div class="table-header">
      <div class="title">
        <strong>需求列表</strong>
        <span class="count">共 {{ pagination.total }} 项</span>
      </div>
      <div class="header-actions">
        <el-button text class="action-button" @click="$emit('download-template')">
          <el-icon><Download /></el-icon>
          下载模板
        </el-button>
        <el-upload
          class="support-upload"
          :action="''"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleImportFile"
          accept=".xlsx,.xls"
        >
          <el-button text class="action-button">
            <el-icon><Upload /></el-icon>
            导入
          </el-button>
        </el-upload>
        <el-button text class="action-button" @click="$emit('export')">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
      </div>
    </div>

    <!-- 加载状态 -->
    <PageLoading 
      v-if="loading && !requirements.length"
      title="正在加载需求列表"
      subtitle="请稍候..."
    />
    <el-table
      v-else
      ref="tableRef"
      :data="requirements"
      row-key="id"
      v-loading="loading"
      stripe
      highlight-current-row
      :style="{ flex: '1 1 auto' }"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @sort-change="handleSortChange"
    >
      <el-table-column type="selection" width="50" fixed="left" />
      <el-table-column label="需求" min-width="300" show-overflow-tooltip fixed="left">
        <template #default="{ row }">
          <div class="requirement-cell">
            <div class="title-row">
              <el-link type="primary" @click="$emit('open-detail', row.id)">
                {{ row.title }}
              </el-link>
            </div>
            <div class="meta">
              <span>#{{ row.id }}</span>
              <span>{{ row.project_name || '未关联项目' }}</span>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="140" align="center" prop="status" sortable="custom" column-key="status">
        <template #default="{ row }">
          <el-popover
            v-model:visible="editingPopovers[`status-${row.id}`]"
            placement="top"
            :width="200"
            popper-class="requirement-edit-popover"
            :trigger="'manual' as any"
            :hide-after="0"
            :close-on-click-outside="false"
            :popper-options="{ strategy: 'fixed' }"
          >
            <template #reference>
              <el-tag 
                size="small" 
                :type="statusTagType(row.status)"
                class="editable-tag"
                @click.stop="handleStatusClick(row)"
              >
                {{ getStatusLabel(row.status) }}
              </el-tag>
            </template>
            <div class="popover-content" @click.stop @mousedown.stop @mouseup.stop>
              <el-select
                v-model="editingStatus"
                placeholder="请选择状态"
                style="width: 100%;"
                @click.stop
                @mousedown.stop
                @mouseup.stop
                @change="handleStatusChange"
                teleported
              >
                <el-option
                  v-for="option in statusOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                  @click.stop
                  @mousedown.stop
                />
              </el-select>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="优先级" width="120" align="center" prop="priority" sortable="custom" column-key="priority">
        <template #default="{ row }">
          <el-popover
            v-model:visible="editingPopovers[`priority-${row.id}`]"
            placement="top"
            :width="200"
            popper-class="requirement-edit-popover"
            :trigger="'manual' as any"
            :hide-after="0"
            :close-on-click-outside="false"
            :popper-options="{ strategy: 'fixed' }"
          >
            <template #reference>
              <el-tag 
                size="small" 
                :type="priorityTagType(row.priority)"
                class="editable-tag"
                @click.stop="handlePriorityClick(row)"
              >
                {{ getPriorityLabel(row.priority) }}
              </el-tag>
            </template>
            <div class="popover-content" @click.stop @mousedown.stop @mouseup.stop>
              <el-select
                v-model="editingPriority"
                placeholder="请选择优先级"
                style="width: 100%;"
                @click.stop
                @mousedown.stop
                @mouseup.stop
                @change="handlePriorityChange"
                teleported
              >
                <el-option
                  v-for="option in priorityOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                  @click.stop
                  @mousedown.stop
                />
              </el-select>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="类型" width="100" align="center" prop="requirement_type" sortable="custom" column-key="requirement_type">
        <template #default="{ row }">
          <el-popover
            v-model:visible="editingPopovers[`type-${row.id}`]"
            placement="top"
            :width="200"
            popper-class="requirement-edit-popover"
            :trigger="'manual' as any"
            :hide-after="0"
            :close-on-click-outside="false"
            :popper-options="{ strategy: 'fixed' }"
          >
            <template #reference>
              <el-tag 
                size="small" 
                type="info"
                class="editable-tag"
                @click.stop="handleTypeClick(row)"
              >
                {{ getTypeLabel(row.requirement_type) }}
              </el-tag>
            </template>
            <div class="popover-content" @click.stop @mousedown.stop @mouseup.stop>
              <el-select
                v-model="editingType"
                placeholder="请选择类型"
                style="width: 100%;"
                @click.stop
                @mousedown.stop
                @mouseup.stop
                @change="handleTypeChange"
                teleported
              >
                <el-option
                  v-for="option in typeOptions || []"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                  @click.stop
                  @mousedown.stop
                />
              </el-select>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="来源" width="100" align="center" prop="source" sortable="custom" column-key="source">
        <template #default="{ row }">
          <el-popover
            v-model:visible="editingPopovers[`source-${row.id}`]"
            placement="top"
            :width="200"
            popper-class="requirement-edit-popover"
            :trigger="'manual' as any"
            :hide-after="0"
            :close-on-click-outside="false"
            :popper-options="{ strategy: 'fixed' }"
          >
            <template #reference>
              <el-tag 
                size="small" 
                type="info"
                class="editable-tag"
                @click.stop="handleSourceClick(row)"
              >
                {{ getSourceLabel(row.source) }}
              </el-tag>
            </template>
            <div class="popover-content" @click.stop @mousedown.stop @mouseup.stop>
              <el-select
                v-model="editingSource"
                placeholder="请选择来源"
                style="width: 100%;"
                @click.stop
                @mousedown.stop
                @mouseup.stop
                @change="handleSourceChange"
                teleported
              >
                <el-option
                  v-for="option in sourceOptions || []"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                  @click.stop
                  @mousedown.stop
                />
              </el-select>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="负责人" width="150" show-overflow-tooltip prop="assignee_name" sortable="custom" column-key="assignee_id">
        <template #default="{ row }">
          <el-popover
            v-model:visible="editingPopovers[`assignee-${row.id}`]"
            placement="top"
            :width="250"
            popper-class="requirement-edit-popover"
            :trigger="'manual' as any"
            :hide-after="0"
            :close-on-click-outside="false"
            :popper-options="{ strategy: 'fixed' }"
          >
            <template #reference>
              <div 
                class="editable-text"
                @click.stop="handleAssigneeClick(row)"
              >
                <UserDisplay
                  :user-id="row.assignee_id"
                  :user-name="row.assignee_name"
                  :users-map="usersMap"
                  :show-avatar="true"
                  size="small"
                />
              </div>
            </template>
            <div class="popover-content" @click.stop @mousedown.stop @mouseup.stop>
              <el-select
                v-model="editingAssignee"
                placeholder="请选择负责人"
                style="width: 100%;"
                filterable
                clearable
                @click.stop
                @mousedown.stop
                @mouseup.stop
                @change="handleAssigneeChange"
                teleported
              >
                <el-option
                  v-for="user in users"
                  :key="user.id"
                  :label="user.name"
                  :value="user.id"
                  @click.stop
                  @mousedown.stop
                >
                  <UserDisplay
                    :user-id="user.id"
                    :user-name="user.name"
                    :users-map="usersMap"
                    :show-avatar="true"
                    size="small"
                  />
                </el-option>
                <el-option label="未分配" value="" @click.stop @mousedown.stop />
              </el-select>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="报告人" width="150" show-overflow-tooltip prop="reporter_name" sortable="custom" column-key="reporter_id">
        <template #default="{ row }">
          <el-popover
            v-model:visible="editingPopovers[`reporter-${row.id}`]"
            placement="top"
            :width="250"
            popper-class="requirement-edit-popover"
            :trigger="'manual' as any"
            :hide-after="0"
            :close-on-click-outside="false"
            :popper-options="{ strategy: 'fixed' }"
          >
            <template #reference>
              <div 
                class="editable-text"
                @click.stop="handleReporterClick(row)"
              >
                <UserDisplay
                  :user-id="row.reporter_id"
                  :user-name="row.reporter_name"
                  :users-map="usersMap"
                  :show-avatar="true"
                  size="small"
                />
              </div>
            </template>
            <div class="popover-content" @click.stop @mousedown.stop @mouseup.stop>
              <el-select
                v-model="editingReporter"
                placeholder="请选择报告人"
                style="width: 100%;"
                filterable
                clearable
                @click.stop
                @mousedown.stop
                @mouseup.stop
                @change="handleReporterChange"
                teleported
              >
                <el-option
                  v-for="user in users"
                  :key="user.id"
                  :label="user.name"
                  :value="user.id"
                  @click.stop
                  @mousedown.stop
                >
                  <UserDisplay
                    :user-id="user.id"
                    :user-name="user.name"
                    :users-map="usersMap"
                    :show-avatar="true"
                    size="small"
                  />
                </el-option>
                <el-option label="未分配" value="" @click.stop @mousedown.stop>
                  <span style="color: #909399;">未分配</span>
                </el-option>
              </el-select>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="开始日期" width="170" align="center" show-overflow-tooltip prop="start_date" sortable="custom" column-key="start_date">
        <template #default="{ row }">
          <el-popover
            v-model:visible="editingPopovers[`start_date-${row.id}`]"
            placement="top"
            :width="280"
            popper-class="requirement-edit-popover"
            :trigger="'manual' as any"
            :hide-after="0"
            :close-on-click-outside="false"
            :popper-options="{ strategy: 'fixed' }"
          >
            <template #reference>
              <span 
                class="editable-text"
                style="white-space: nowrap;"
                @click.stop="handleStartDateClick(row)"
              >
                {{ formatDateTimeWithDefault(row.start_date) }}
              </span>
            </template>
            <div class="popover-content" @click.stop @mousedown.stop @mouseup.stop>
              <el-date-picker
                v-model="editingStartDate"
                type="datetime"
                value-format="YYYY-MM-DDTHH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择开始日期时间"
                style="width: 100%;"
                @change="handleStartDateChange"
                @click.stop
                @mousedown.stop
                teleported
              />
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="截止日期" width="170" align="center" show-overflow-tooltip prop="due_date" sortable="custom" column-key="due_date">
        <template #default="{ row }">
          <el-popover
            v-model:visible="editingPopovers[`due_date-${row.id}`]"
            placement="top"
            :width="280"
            popper-class="requirement-edit-popover"
            :trigger="'manual' as any"
            :hide-after="0"
            :close-on-click-outside="false"
            :popper-options="{ strategy: 'fixed' }"
          >
            <template #reference>
              <span 
                :class="{ 'overdue': row.is_overdue, 'editable-text': true }"
                style="white-space: nowrap;"
                @click.stop="handleDueDateClick(row)"
              >
                {{ formatDateTimeWithDefault(row.due_date) }}
              </span>
            </template>
            <div class="popover-content" @click.stop @mousedown.stop @mouseup.stop>
              <el-date-picker
                v-model="editingDueDate"
                type="datetime"
                value-format="YYYY-MM-DDTHH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择截止日期时间"
                style="width: 100%;"
                @change="handleDueDateChange"
                @click.stop
                @mousedown.stop
                teleported
              />
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="预估工时" width="100" align="center">
        <template #default="{ row }">
          <el-popover
            v-model:visible="editingPopovers[`estimated_effort-${row.id}`]"
            placement="top"
            :width="200"
            popper-class="requirement-edit-popover"
            :trigger="'manual' as any"
            :hide-after="0"
            :close-on-click-outside="false"
            :popper-options="{ strategy: 'fixed' }"
          >
            <template #reference>
              <span 
                class="editable-text"
                @click.stop="handleEstimatedEffortClick(row)"
              >
                {{ row.estimated_effort ? `${row.estimated_effort}h` : '—' }}
              </span>
            </template>
            <div class="popover-content" @click.stop @mousedown.stop @mouseup.stop>
              <el-input-number
                v-model="editingEstimatedEffort"
                :min="0"
                :step="0.5"
                :precision="1"
                placeholder="请输入预估工时"
                style="width: 100%;"
                controls-position="right"
                @change="handleEstimatedEffortChange"
                @click.stop
                @mousedown.stop
              />
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="实际工时" width="100" align="center">
        <template #default="{ row }">
          <el-popover
            v-model:visible="editingPopovers[`actual_effort-${row.id}`]"
            placement="top"
            :width="200"
            popper-class="requirement-edit-popover"
            :trigger="'manual' as any"
            :hide-after="0"
            :close-on-click-outside="false"
            :popper-options="{ strategy: 'fixed' }"
          >
            <template #reference>
              <span 
                class="editable-text"
                @click.stop="handleActualEffortClick(row)"
              >
                {{ row.actual_effort ? `${row.actual_effort}h` : '—' }}
              </span>
            </template>
            <div class="popover-content" @click.stop @mousedown.stop @mouseup.stop>
              <el-input-number
                v-model="editingActualEffort"
                :min="0"
                :step="0.5"
                :precision="1"
                placeholder="请输入实际工时"
                style="width: 100%;"
                controls-position="right"
                @change="handleActualEffortChange"
                @click.stop
                @mousedown.stop
              />
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="进度" width="100" align="center">
        <template #default="{ row }">
          <el-popover
            v-model:visible="editingPopovers[`progress-${row.id}`]"
            placement="top"
            :width="200"
            popper-class="requirement-edit-popover"
            :trigger="'manual' as any"
            :hide-after="0"
            :close-on-click-outside="false"
            :popper-options="{ strategy: 'fixed' }"
          >
            <template #reference>
              <div 
                class="editable-text"
                style="cursor: pointer;"
                @click.stop="handleProgressClick(row)"
              >
                <el-progress 
                  :percentage="row.progress || 0" 
                  :stroke-width="6"
                  :show-text="true"
                  :format="() => `${row.progress || 0}%`"
                />
              </div>
            </template>
            <div class="popover-content" @click.stop @mousedown.stop @mouseup.stop>
              <el-input-number
                v-model="editingProgress"
                :min="0"
                :max="100"
                :step="1"
                :precision="0"
                placeholder="请输入进度(0-100)"
                style="width: 100%;"
                controls-position="right"
                @change="handleProgressChange"
                @click.stop
                @mousedown.stop
              />
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="版本" width="140" show-overflow-tooltip>
        <template #default="{ row }">
          <div v-if="row.versions && row.versions.length > 0" class="versions-cell">
            <el-tag 
              v-for="version in row.versions.slice(0, 2)" 
              :key="version.id"
              size="small"
              type="primary"
              style="margin-right: 4px;"
            >
              {{ version.version_number }}
            </el-tag>
            <span v-if="row.versions.length > 2" class="more-versions">
              +{{ row.versions.length - 2 }}
            </span>
          </div>
          <span v-else>—</span>
        </template>
      </el-table-column>

      <el-table-column label="任务" width="80" align="center">
        <template #default="{ row }">
          <span v-if="row.related_tasks_count !== null && row.related_tasks_count !== undefined">
            {{ row.completed_tasks_count || 0 }}/{{ row.related_tasks_count || 0 }}
          </span>
          <span v-else>—</span>
        </template>
      </el-table-column>

      <el-table-column label="标签" width="120" show-overflow-tooltip>
        <template #default="{ row }">
          <div v-if="row.tags && row.tags.length > 0" class="tags-cell">
            <el-tag 
              v-for="tag in row.tags.slice(0, 2)" 
              :key="tag"
              size="small"
              style="margin-right: 4px;"
            >
              {{ tag }}
            </el-tag>
            <span v-if="row.tags.length > 2" class="more-tags">
              +{{ row.tags.length - 2 }}
            </span>
          </div>
          <span v-else>—</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="160" prop="created_at" sortable="custom" column-key="created_at">
        <template #default="{ row }">
          {{ formatDate(row.created_at) }}
        </template>
      </el-table-column>

      <el-table-column label="更新时间" width="160" prop="updated_at" sortable="custom" column-key="updated_at">
        <template #default="{ row }">
          {{ formatDate(row.updated_at) }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="150" align="center" fixed="right">
        <template #default="{ row }">
          <el-button size="small" text type="primary" @click.stop="handleSplitTask(row)">
            拆分任务
          </el-button>
          <el-button size="small" text type="danger" @click.stop="$emit('delete', row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="table-footer">
      <RequirementBatchToolbar
        v-if="selectedIds.length > 0"
        :count="selectedIds.length"
        :status-options="statusOptionsForBatch || []"
        :priority-options="priorityOptionsForBatch || []"
        :users="usersForBatch || []"
        :loading="batchLoading"
        @update-status="$emit('batch-update-status')"
        @update-priority="$emit('batch-update-priority')"
        @update-type="$emit('batch-update-type')"
        @update-source="$emit('batch-update-source')"
        @assign="$emit('batch-assign')"
        @update-reporter="$emit('batch-update-reporter')"
        @update-project-version="$emit('batch-update-project-version')"
        @remove="$emit('batch-delete')"
        @clear="$emit('batch-clear')"
      />
      <!-- 列表右下角的分页组件 -->
      <div class="table-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next"
          :current-page="pagination.page"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[10, 20, 30, 50]"
          @current-change="$emit('page-change', $event)"
          @size-change="$emit('page-size-change', $event)"
        />
      </div>
    </div>

  </el-card>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import dayjs from 'dayjs'
import type { ElTable } from 'element-plus'
import type { RequirementResponse } from '@/api/requirements'
import RequirementBatchToolbar from '../components/RequirementBatchToolbar.vue'
import UserDisplay from '@/components/ui/UserDisplay.vue'
import PageLoading from '@/components/ui/PageLoading.vue'
import { formatDateTime } from '@/utils/date'
import type { User } from '@/types/user'
import { useRequirementStates } from '@/composables/useRequirementStates'

interface UserOption {
  id: string
  name: string
}

const props = defineProps<{
  requirements: RequirementResponse[]
  loading: boolean
  pagination: {
    page: number
    pageSize: number
    total: number
  }
  statusOptions: Array<{ value: string; label: string }>
  priorityOptions: Array<{ value: string; label: string }>
  typeOptions?: Array<{ value: string; label: string }>
  sourceOptions?: Array<{ value: string; label: string }>
  users: UserOption[]
  selectedIds: string[]
  batchLoading?: boolean
  statusOptionsForBatch?: Array<{ value: string; label: string }>
  priorityOptionsForBatch?: Array<{ value: string; label: string }>
  usersForBatch?: Array<{ id: string; name: string }>
}>()

const emit = defineEmits<{
  (event: 'page-change', page: number): void
  (event: 'page-size-change', size: number): void
  (event: 'select-change', ids: string[]): void
  (event: 'open-detail', id: string): void
  (event: 'delete', id: string): void
  (event: 'refresh'): void
  (event: 'sort-change', params: { prop: string; order: 'ascending' | 'descending' | null }): void
  (event: 'update-status', payload: { id: string; status: string }): void
  (event: 'update-priority', id: string, priority: string): void
  (event: 'update-type', id: string, type: string): void
  (event: 'update-source', id: string, source: string): void
  (event: 'update-assignee', id: string, assigneeId: string | null): void
  (event: 'update-reporter', id: string, reporterId: string | null): void
  (event: 'update-start-date', id: string, startDate: string | null): void
  (event: 'update-due-date', id: string, dueDate: string | null): void
  (event: 'update-estimated-effort', id: string, effort: number | null): void
  (event: 'update-actual-effort', id: string, effort: number | null): void
  (event: 'update-progress', id: string, progress: number | null): void
  (event: 'split-task', item: RequirementResponse): void
  (event: 'batch-update-status'): void
  (event: 'batch-update-priority'): void
  (event: 'batch-update-type'): void
  (event: 'batch-update-source'): void
  (event: 'batch-assign'): void
  (event: 'batch-update-reporter'): void
  (event: 'batch-update-project-version'): void
  (event: 'batch-delete'): void
  (event: 'batch-clear'): void
  (event: 'download-template'): void
  (event: 'import', file: File): void
  (event: 'export'): void
}>()

const handleImportFile = (file: any) => {
  if (file.raw) {
    emit('import', file.raw)
  }
}

const tableRef = ref<InstanceType<typeof ElTable>>()

// 同步表格头部和内容的横向滚动
let scrollHandlersSetup = false
let isScrolling = false

const handleBodyScroll = (e: Event) => {
  if (isScrolling) return
  isScrolling = true
  
  const target = e.target as HTMLElement
  const scrollLeft = target.scrollLeft
  
  if (tableRef.value) {
    const headerWrapper = tableRef.value.$el?.querySelector('.el-table__header-wrapper')
    const fixedBodyWrapper = tableRef.value.$el?.querySelector('.el-table__fixed-body-wrapper')
    const fixedHeaderWrapper = tableRef.value.$el?.querySelector('.el-table__fixed-header-wrapper')
    
    if (headerWrapper && (headerWrapper as HTMLElement).scrollLeft !== scrollLeft) {
      (headerWrapper as HTMLElement).scrollLeft = scrollLeft
    }
    if (fixedBodyWrapper && (fixedBodyWrapper as HTMLElement).scrollLeft !== scrollLeft) {
      (fixedBodyWrapper as HTMLElement).scrollLeft = scrollLeft
    }
    if (fixedHeaderWrapper && (fixedHeaderWrapper as HTMLElement).scrollLeft !== scrollLeft) {
      (fixedHeaderWrapper as HTMLElement).scrollLeft = scrollLeft
    }
  }
  
  requestAnimationFrame(() => {
    isScrolling = false
  })
}

const setupScrollSync = () => {
  if (!tableRef.value || scrollHandlersSetup) return
  
  const bodyWrapper = tableRef.value.$el?.querySelector('.el-table__body-wrapper')
  const headerWrapper = tableRef.value.$el?.querySelector('.el-table__header-wrapper')
  const fixedBodyWrapper = tableRef.value.$el?.querySelector('.el-table__fixed-body-wrapper')
  const fixedHeaderWrapper = tableRef.value.$el?.querySelector('.el-table__fixed-header-wrapper')
  
  // 只监听表体的滚动，同步到表头（表头不显示滚动条，所以不需要监听表头的滚动）
  if (bodyWrapper && headerWrapper) {
    bodyWrapper.addEventListener('scroll', handleBodyScroll, { passive: true })
    scrollHandlersSetup = true
  }
  
  // 同步固定列的滚动（固定列的表头也不显示滚动条）
  if (fixedBodyWrapper && fixedHeaderWrapper) {
    fixedBodyWrapper.addEventListener('scroll', handleBodyScroll, { passive: true })
  }
}

onMounted(() => {
  nextTick(() => {
    setupScrollSync()
  })
})

// 监听数据变化，重新设置滚动同步
watch(
  () => props.requirements,
  () => {
    nextTick(() => {
      scrollHandlersSetup = false
      setupScrollSync()
    })
  }
)

const formatDate = (value?: string) => {
  if (!value) return '—'
  return dayjs(value).format('YYYY-MM-DD HH:mm')
}

const formatDateTimeWithDefault = (value?: string | null) => {
  if (!value) return '—'
  return formatDateTime(value)
}

// 构建用户信息映射，避免重复调用用户详情接口
const usersMap = computed(() => {
  const map = new Map<string, User>()
  
  // 从需求列表中收集所有用户ID和名称
  props.requirements.forEach(req => {
    // 负责人
    if (req.assignee_id) {
      if (!map.has(req.assignee_id)) {
        map.set(req.assignee_id, {
          id: req.assignee_id,
          username: req.assignee_name || '',
          name: req.assignee_name || '',
          email: '',
          avatar: undefined,
          roles: [],
          status: 'active',
          is_verified: false,
          created_at: '',
          updated_at: ''
        } as User)
      }
    }
    
    // 报告人
    if (req.reporter_id) {
      if (!map.has(req.reporter_id)) {
        map.set(req.reporter_id, {
          id: req.reporter_id,
          username: req.reporter_name || '',
          name: req.reporter_name || '',
          email: '',
          avatar: undefined,
          roles: [],
          status: 'active',
          is_verified: false,
          created_at: '',
          updated_at: ''
        } as User)
      }
    }
  })
  
  return map
})

// 使用需求状态 composable 获取状态名称
const { getStateName, getStatusType } = useRequirementStates()

const getStatusLabel = (value?: string | null) => {
  if (!value) return '未设置'
  
  // 优先从状态管理中获取状态名称
  const stateName = getStateName(value)
  if (stateName && stateName !== value) {
    return stateName
  }
  
  // 如果状态管理中没有找到，尝试从 props.statusOptions 中查找（大小写不敏感）
  const option = props.statusOptions.find(option => 
    option.value === value || 
    option.value?.toLowerCase() === value.toLowerCase() ||
    option.label === value
  )
  
  if (option) {
    return option.label
  }
  
  // 如果都找不到，返回原始值
  return value
}

const getPriorityLabel = (value?: string | null) => {
  if (!value) return '未设置'
  return props.priorityOptions.find(option => option.value === value)?.label ?? value
}

const getTypeLabel = (value?: string | null) => {
  if (!value) return '—'
  return props.typeOptions?.find(option => option.value === value)?.label ?? value
}

const getSourceLabel = (value?: string | null) => {
  if (!value) return '—'
  return props.sourceOptions?.find(option => option.value === value)?.label ?? value
}

// 处理任务拆分
const handleSplitTask = (row: RequirementResponse) => {
  emit('split-task', row)
}

const statusTagType = (status?: string | null) => {
  if (!status) return 'info'
  // 使用状态管理中的 getStatusType 函数获取标签类型
  return getStatusType(status)
}

const priorityTagType = (priority?: string | null) => {
  switch (priority) {
    case 'critical':
    case 'urgent':
    case 'URGENT':
      return 'danger'
    case 'high':
      return 'warning'
    case 'medium':
      return 'success'
    default:
      return 'info'
  }
}

// 防止选择状态同步时触发递归更新的标志
const isSyncingSelection = ref(false)

const handleSelectionChange = (selection: RequirementResponse[]) => {
  // 如果正在同步选择状态，跳过事件处理，避免无限循环
  if (isSyncingSelection.value) {
    return
  }
  
  emit(
    'select-change',
    selection.map(item => item.id)
  )
}

const handleRowClick = (_row: RequirementResponse) => {
  // 点击行时不自动选择，保持用户明确选择的行为
  // 如果需要点击行也能选择，可以取消下面的注释并传入 row 参数
  // tableRef.value?.toggleRowSelection(row)
}

// 处理表格排序变化
// Element Plus 的 sort-change 事件会传递 column-key（如果设置了）而不是 prop
const handleSortChange = ({ prop, order, column }: { prop: string; order: 'ascending' | 'descending' | null; column?: any }) => {
  // 优先使用 column-key，如果没有则使用 prop
  const sortProp = column?.columnKey || prop
  emit('sort-change', { prop: sortProp, order })
}

// Popover 管理
const editingPopovers = ref<Record<string, boolean>>({})
const editingRequirementId = ref<string | null>(null)

// 关闭所有其他 popover
const closeOtherPopovers = (exceptKey: string) => {
  Object.keys(editingPopovers.value).forEach(key => {
    if (key !== exceptKey) {
      editingPopovers.value[key] = false
    }
  })
}

// 状态编辑相关
const editingStatus = ref<string>('')

const handleStatusClick = (row: RequirementResponse) => {
  const popoverKey = `status-${row.id}`
  closeOtherPopovers(popoverKey)
  editingRequirementId.value = row.id
  editingStatus.value = row.status || ''
  editingPopovers.value[popoverKey] = true
}

// 状态选择后直接更新
const handleStatusChange = (val: string) => {
  if (!editingRequirementId.value) return
  if (!val) return
  
  const requirementId = editingRequirementId.value
  const popoverKey = `status-${requirementId}`
  
  // 关闭弹窗
  editingPopovers.value[popoverKey] = false
  editingRequirementId.value = null
  editingStatus.value = ''
  
  // 触发更新（父组件会处理成功提示和刷新）
  emit('update-status', { id: requirementId, status: val } as { id: string; status: string })
}

// 优先级编辑相关
const editingPriority = ref<string>('')

const handlePriorityClick = (row: RequirementResponse) => {
  const popoverKey = `priority-${row.id}`
  closeOtherPopovers(popoverKey)
  editingRequirementId.value = row.id
  editingPriority.value = row.priority || ''
  editingPopovers.value[popoverKey] = true
}

// 优先级选择后直接更新
const handlePriorityChange = (val: string) => {
  if (!editingRequirementId.value) return
  if (!val) return
  
  const requirementId = editingRequirementId.value
  const popoverKey = `priority-${requirementId}`
  
  // 关闭弹窗
  editingPopovers.value[popoverKey] = false
  editingRequirementId.value = null
  editingPriority.value = ''
  
  // 触发更新（父组件会处理成功提示和刷新）
  emit('update-priority', requirementId, val)
}

// 类型编辑相关
const editingType = ref<string>('')

const handleTypeClick = (row: RequirementResponse) => {
  const popoverKey = `type-${row.id}`
  closeOtherPopovers(popoverKey)
  editingRequirementId.value = row.id
  editingType.value = row.requirement_type || ''
  editingPopovers.value[popoverKey] = true
}

// 类型选择后直接更新
const handleTypeChange = (val: string) => {
  if (!editingRequirementId.value) return
  if (!val) return
  
  const requirementId = editingRequirementId.value
  const popoverKey = `type-${requirementId}`
  
  // 关闭弹窗
  editingPopovers.value[popoverKey] = false
  editingRequirementId.value = null
  editingType.value = ''
  
  // 触发更新（父组件会处理成功提示和刷新）
  emit('update-type', requirementId, val)
}

// 来源编辑相关
const editingSource = ref<string>('')

const handleSourceClick = (row: RequirementResponse) => {
  const popoverKey = `source-${row.id}`
  closeOtherPopovers(popoverKey)
  editingRequirementId.value = row.id
  editingSource.value = row.source || ''
  editingPopovers.value[popoverKey] = true
}

// 来源选择后直接更新
const handleSourceChange = (val: string) => {
  if (!editingRequirementId.value) return
  if (!val) return
  
  const requirementId = editingRequirementId.value
  const popoverKey = `source-${requirementId}`
  
  // 关闭弹窗
  editingPopovers.value[popoverKey] = false
  editingRequirementId.value = null
  editingSource.value = ''
  
  // 触发更新（父组件会处理成功提示和刷新）
  emit('update-source', requirementId, val)
}

// 负责人编辑相关
const editingAssignee = ref<string | null>(null)

const handleAssigneeClick = (row: RequirementResponse) => {
  const popoverKey = `assignee-${row.id}`
  closeOtherPopovers(popoverKey)
  editingRequirementId.value = row.id
  editingAssignee.value = row.assignee_id || null
  editingPopovers.value[popoverKey] = true
}

// 负责人选择后直接更新
const handleAssigneeChange = (val: string | null) => {
  if (!editingRequirementId.value) return
  
  const requirementId = editingRequirementId.value
  const assigneeValue = val || null
  const popoverKey = `assignee-${requirementId}`
  
  // 关闭弹窗
  editingPopovers.value[popoverKey] = false
  editingRequirementId.value = null
  editingAssignee.value = null
  
  // 触发更新（父组件会处理成功提示和刷新）
  emit('update-assignee', requirementId, assigneeValue)
}

// 报告人编辑相关
const editingReporter = ref<string | null>(null)

const handleReporterClick = (row: RequirementResponse) => {
  const popoverKey = `reporter-${row.id}`
  closeOtherPopovers(popoverKey)
  editingRequirementId.value = row.id
  editingReporter.value = row.reporter_id || null
  editingPopovers.value[popoverKey] = true
}

// 报告人选择后直接更新
const handleReporterChange = (val: string | null) => {
  if (!editingRequirementId.value) return
  
  const requirementId = editingRequirementId.value
  const reporterValue = val || null
  const popoverKey = `reporter-${requirementId}`
  
  // 关闭弹窗
  editingPopovers.value[popoverKey] = false
  editingRequirementId.value = null
  editingReporter.value = null
  
  // 触发更新（父组件会处理成功提示和刷新）
  emit('update-reporter', requirementId, reporterValue)
}

// 开始日期编辑相关
const editingStartDate = ref<string | null>(null)

const handleStartDateClick = (row: RequirementResponse) => {
  const popoverKey = `start_date-${row.id}`
  closeOtherPopovers(popoverKey)
  editingRequirementId.value = row.id
  editingStartDate.value = row.start_date || null
  editingPopovers.value[popoverKey] = true
}

const handleStartDateChange = (val: string | null) => {
  if (!editingRequirementId.value) return
  
  const requirementId = editingRequirementId.value
  const popoverKey = `start_date-${requirementId}`
  
  // 关闭弹窗
  editingPopovers.value[popoverKey] = false
  editingRequirementId.value = null
  editingStartDate.value = null
  
  // 触发更新
  emit('update-start-date', requirementId, val)
}

// 截止日期编辑相关
const editingDueDate = ref<string | null>(null)

const handleDueDateClick = (row: RequirementResponse) => {
  const popoverKey = `due_date-${row.id}`
  closeOtherPopovers(popoverKey)
  editingRequirementId.value = row.id
  editingDueDate.value = row.due_date || null
  editingPopovers.value[popoverKey] = true
}

const handleDueDateChange = (val: string | null) => {
  if (!editingRequirementId.value) return
  
  const requirementId = editingRequirementId.value
  const popoverKey = `due_date-${requirementId}`
  
  // 关闭弹窗
  editingPopovers.value[popoverKey] = false
  editingRequirementId.value = null
  editingDueDate.value = null
  
  // 触发更新
  emit('update-due-date', requirementId, val)
}

// 预估工时编辑相关
const editingEstimatedEffort = ref<number | null>(null)

const handleEstimatedEffortClick = (row: RequirementResponse) => {
  const popoverKey = `estimated_effort-${row.id}`
  closeOtherPopovers(popoverKey)
  editingRequirementId.value = row.id
  editingEstimatedEffort.value = row.estimated_effort || null
  editingPopovers.value[popoverKey] = true
}

const handleEstimatedEffortChange = (val?: number) => {
  if (!editingRequirementId.value) return
  
  const requirementId = editingRequirementId.value
  const popoverKey = `estimated_effort-${requirementId}`
  const effortValue = val ?? null
  
  // 关闭弹窗
  editingPopovers.value[popoverKey] = false
  editingRequirementId.value = null
  editingEstimatedEffort.value = null
  
  // 触发更新
  emit('update-estimated-effort', requirementId, effortValue)
}

// 实际工时编辑相关
const editingActualEffort = ref<number | null>(null)

const handleActualEffortClick = (row: RequirementResponse) => {
  const popoverKey = `actual_effort-${row.id}`
  closeOtherPopovers(popoverKey)
  editingRequirementId.value = row.id
  editingActualEffort.value = row.actual_effort || null
  editingPopovers.value[popoverKey] = true
}

const handleActualEffortChange = (val?: number) => {
  if (!editingRequirementId.value) return
  
  const requirementId = editingRequirementId.value
  const popoverKey = `actual_effort-${requirementId}`
  const effortValue = val ?? null
  
  // 关闭弹窗
  editingPopovers.value[popoverKey] = false
  editingRequirementId.value = null
  editingActualEffort.value = null
  
  // 触发更新
  emit('update-actual-effort', requirementId, effortValue)
}

// 进度编辑相关
const editingProgress = ref<number | null>(null)

const handleProgressClick = (row: RequirementResponse) => {
  const popoverKey = `progress-${row.id}`
  closeOtherPopovers(popoverKey)
  editingRequirementId.value = row.id
  editingProgress.value = row.progress || null
  editingPopovers.value[popoverKey] = true
}

const handleProgressChange = (val?: number) => {
  if (!editingRequirementId.value) return
  
  const requirementId = editingRequirementId.value
  const popoverKey = `progress-${requirementId}`
  const progressValue = val ?? null
  
  // 关闭弹窗
  editingPopovers.value[popoverKey] = false
  editingRequirementId.value = null
  editingProgress.value = null
  
  // 触发更新
  emit('update-progress', requirementId, progressValue)
}

// 同步表格选择状态到 store
watch(
  () => props.selectedIds,
  async selectedIds => {
    await nextTick()
    if (!tableRef.value || isSyncingSelection.value) return
    
    // 检查当前表格选择状态是否已经与 selectedIds 一致
    const currentSelectedRows = tableRef.value.getSelectionRows() as RequirementResponse[]
    const currentSelectedIds = currentSelectedRows.map(row => row.id)
    const expectedSelectedIds = props.requirements
      .filter(row => selectedIds.includes(row.id))
      .map(row => row.id)
    
    // 如果状态已经一致，不需要更新
    if (
      currentSelectedIds.length === expectedSelectedIds.length &&
      currentSelectedIds.every(id => expectedSelectedIds.includes(id)) &&
      expectedSelectedIds.every(id => currentSelectedIds.includes(id))
    ) {
      return
    }
    
    // 设置同步标志，防止触发 selection-change 事件
    isSyncingSelection.value = true
    
    try {
      // 先清除所有选择
      tableRef.value.clearSelection()
      // 如果没有选中的，直接返回
      if (!selectedIds.length) {
        return
      }
      // 根据 selectedIds 同步表格选择状态
      props.requirements.forEach(row => {
        if (selectedIds.includes(row.id)) {
          tableRef.value?.toggleRowSelection(row, true)
        }
      })
    } finally {
      // 使用 nextTick 确保 DOM 更新完成后再重置标志
      await nextTick()
      isSyncingSelection.value = false
    }
  },
  { immediate: true, deep: true }
)

// 监听 requirements 数据变化，重新同步选择状态
watch(
  () => props.requirements,
  async () => {
    await nextTick()
    if (!tableRef.value || isSyncingSelection.value) return
    
    // 设置同步标志，防止触发 selection-change 事件
    isSyncingSelection.value = true
    
    try {
      // 数据变化时，重新同步选择状态
      if (!props.selectedIds.length) {
        tableRef.value.clearSelection()
        return
      }
      // 先清除所有选择
      tableRef.value.clearSelection()
      // 根据当前页面的 requirements 和 selectedIds 同步选择状态
      props.requirements.forEach(row => {
        if (props.selectedIds.includes(row.id)) {
          tableRef.value?.toggleRowSelection(row, true)
        }
      })
    } finally {
      // 使用 nextTick 确保 DOM 更新完成后再重置标志
      await nextTick()
      isSyncingSelection.value = false
    }
  },
  { deep: true }
)
</script>

<style scoped lang="scss">
.list-view-card {
  border-radius: 12px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  width: 100%;
  background: #ffffff;
  position: relative;
  
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #ebeef5;
  background: #fafbfc;
  flex-shrink: 0;
  
  .title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #303133;
    
    strong {
      font-size: 16px;
      font-weight: 600;
    }
    
    .count {
      font-size: 13px;
      color: #909399;
      font-weight: 400;
    }
  }
  
  .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .action-button {
      color: #606266;
      font-size: 13px;
      padding: 6px 12px;
      transition: all 0.2s;
      
      &:hover {
        color: #409eff;
        background-color: #ecf5ff;
      }
      
      .el-icon {
        margin-right: 4px;
        font-size: 14px;
      }
    }
    
    .support-upload {
      display: inline-block;
    }
  }
  
  :deep(.el-button) {
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s;
    
    &:hover {
      transform: translateY(-1px);
    }
  }
}

.requirement-cell {
  padding: 4px 0;
  
  .title-row {
    margin-bottom: 6px;
    
    :deep(.el-link) {
      font-weight: 600;
      font-size: 14px;
      color: #303133;
      transition: all 0.2s;
      
      &:hover {
        color: #409eff;
        text-decoration: none;
      }
    }
  }
  
  .meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #909399;
    
    span {
      display: inline-flex;
      align-items: center;
      
      &:first-child {
        color: #909399;
        font-family: 'Monaco', 'Consolas', monospace;
      }
      
      &:not(:first-child) {
        padding: 2px 8px;
        background: #f0f2f5;
        border-radius: 4px;
        color: #606266;
      }
    }
  }
}

.table-footer {
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ebeef5;
  background: #fafbfc;
  flex-shrink: 0;
  min-height: 60px;
  position: relative;
}

.table-pagination {
  margin-left: auto;
  
  :deep(.el-pagination) {
    margin: 0;
    
    .el-pagination__total {
      color: #606266;
      font-size: 13px;
      font-weight: 500;
      margin-right: 12px;
    }
    
    .el-pagination__sizes {
      margin-right: 12px;
      
      .el-select {
        .el-input__inner {
          height: 28px;
          line-height: 28px;
          font-size: 13px;
          border-radius: 4px;
          border-color: #dcdfe6;
          transition: all 0.2s;
          
          &:hover {
            border-color: #c0c4cc;
          }
        }
        
        &.is-focus .el-input__inner {
          border-color: #409eff;
        }
      }
    }
    
    .btn-prev,
    .btn-next {
      width: 28px;
      height: 28px;
      line-height: 28px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      background: #ffffff;
      color: #606266;
      font-size: 14px;
      transition: all 0.2s;
      
      &:hover:not(.disabled) {
        color: #409eff;
        border-color: #409eff;
        background: #ecf5ff;
      }
      
      &.disabled {
        color: #c0c4cc;
        cursor: not-allowed;
        background: #f5f7fa;
      }
    }
    
    .el-pager {
      margin: 0 8px;
      
      li {
        min-width: 28px;
        height: 28px;
        line-height: 28px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        background: #ffffff;
        color: #606266;
        font-size: 13px;
        font-weight: 500;
        margin: 0 2px;
        transition: all 0.2s;
        
        &:hover:not(.disabled):not(.is-active) {
          color: #409eff;
          border-color: #409eff;
          background: #ecf5ff;
        }
        
        &.is-active {
          color: #ffffff;
          background: #409eff;
          border-color: #409eff;
          font-weight: 600;
        }
        
        &.disabled {
          color: #c0c4cc;
          cursor: not-allowed;
          background: #f5f7fa;
        }
      }
    }
    
    // 响应式优化
    @media (max-width: 768px) {
      .el-pagination__total {
        display: none;
      }
    }
  }
}

.list-view-card {
  :deep(.el-table__inner-wrapper) {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  
  :deep(.el-table) {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 1290px; /* 根据列宽计算的最小宽度：50+280+140+120+140+140+160+160+100=1290 */
    width: 100%;
    border: none;
    
    .el-table__header-wrapper {
      flex-shrink: 0;
    }
    
    .el-table__body-wrapper {
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: auto;
      overflow-y: auto;
    }
    
    .el-table__header {
      th {
        background: #fafbfc;
        color: #606266;
        font-weight: 600;
        font-size: 13px;
        border-bottom: 2px solid #ebeef5;
        padding: 12px 0;
        white-space: nowrap; /* 防止表头文字换行 */
      }
      
      // 选择框列头样式
      th.el-table__cell:first-child {
        text-align: center;
        
        .cell {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    
    .el-table__body {
      tr {
        transition: background-color 0.2s;
        
        &:hover {
          background-color: #f5f7fa;
        }
        
        td {
          border-bottom: 1px solid #f0f2f5;
          padding: 14px 8px;
          white-space: nowrap; /* 防止单元格内容换行 */
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        // 选择框列单元格样式
        td.el-table__cell:first-child {
          text-align: center;
          padding: 14px 0;
          
          .cell {
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      
      // 选中行的样式
      tr.el-table__row.current-row,
      tr.el-table__row.selected {
        background-color: #ecf5ff !important;
        
        &:hover {
          background-color: #d9ecff !important;
        }
        
        td {
          background-color: transparent;
        }
      }
      
      // 斑马纹选中行
      tr.el-table__row--striped {
        background-color: #fafbfc;
        
        &:hover {
          background-color: #f5f7fa;
        }
        
        // 斑马纹行被选中时的样式
        &.current-row,
        &.selected {
          background-color: #e6f2ff !important;
          
          &:hover {
            background-color: #d0e7ff !important;
          }
        }
      }
    }
    
    // 选择框样式优化
    :deep(.el-checkbox) {
      .el-checkbox__inner {
        border-color: #dcdfe6;
        transition: all 0.2s;
        
        &:hover {
          border-color: #409eff;
        }
      }
      
      &.is-checked .el-checkbox__inner {
        background-color: #409eff;
        border-color: #409eff;
      }
      
      &.is-indeterminate .el-checkbox__inner {
        background-color: #409eff;
        border-color: #409eff;
      }
    }
  }
  
  :deep(.el-table__body-wrapper) {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: auto;
    min-height: 0;
  }
  
  :deep(.el-table__header-wrapper) {
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    // 隐藏表头滚动条，但保持可滚动
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    
    &::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
  }
  
  // 隐藏固定列表头的滚动条
  :deep(.el-table__fixed-header-wrapper) {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    
    &::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
  }
}

.editable-tag {
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.editable-text {
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    opacity: 0.8;
  }
}

// Popover 样式
:deep(.requirement-edit-popover) {
  padding: 8px;
  
  .popover-content {
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    .popover-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 4px;
    }
  }
}


:deep(.el-button--text) {
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.2s;
  
  &:hover {
    background-color: #f0f2f5;
  }
  
  &.el-button--danger {
    &:hover {
      color: #f56c6c;
      background-color: #fef0f0;
    }
  }
}

.overdue {
  color: #f56c6c;
  font-weight: 500;
}

.versions-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  
  .more-versions {
    color: #909399;
    font-size: 12px;
  }
}

.tags-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  
  .more-tags {
    color: #909399;
    font-size: 12px;
  }
}

:deep(.el-progress) {
  .el-progress__text {
    font-size: 12px;
    color: #606266;
  }
}
</style>


